import React from 'react';
import BaseScreen from "../BaseScreen";
import styles from "../../css/my.module.css"
import { msgDel, msgRead, msgUnread, notice } from '../../service/newsService'
import { Actions, NameSpace } from "../../model/taskModel";
import { connect } from "react-redux";
import { navigateTo, locationTo, back } from '../../utils/LocationUtil'
import { myNav, Common, NewsImg } from "../../const/imgs";
import { getTOKEN, getInfo, setInfo } from '../../utils/StorageUtil'
import * as locations from "../../const/locations";
import { HintDialog } from '../../view/Dialog'
import { NONEWS } from '../components/Default';
import { getLocalTime } from '../../utils/CommomUtil'
import ProgressView from "../../view/ProgressView";
class NewsTask extends BaseScreen {
  constructor(props) {
    super(props);

    this.CURRENT_PAGE = 1;
    this.PER_PAGE = 20;
    this.state = {
      newsList: [],
      loading: false,
    }
  }
  componentDidMount() {
    switch (getInfo('newsType')) {
      case 1:
        document.title = '公告';
        this.setImg(NewsImg.GG)
        break;
      case 2:
        document.title = '任务提醒'
        this.setImg(NewsImg.RWTX)
        break;
      case 3:
        document.title = '考勤消息'
        this.setImg(NewsImg.KQXX)
        break;
    }
    if (getInfo('newsType') !== 1) {
      this.getNewsList({
        current_page: this.CURRENT_PAGE,
        per_page: this.PER_PAGE
      })
    } else {
      this.getNoticeList({
        current_page: this.CURRENT_PAGE,
        per_page: this.PER_PAGE
      })
    }

  }
  setImg = (img) => {
    this.setState({
      imgurl: img
    })
  }
  // 获取公告列表
  getNoticeList = (params) => {
    this.setState({
      loading: true
    })
    notice({
      type: getInfo('newsType'),
      token: getTOKEN(),
      ...params
    })
      .then(
        res => {
          this.setState({
            loading: false
          })
          if (res.error_code === 0) {
            this.setState({
              newsList: res.data.data
            })
          }
        }
      )
      .catch(
        err => {
          console.log(err)
        }
      )
  }
  // 获取消息列表  
  getNewsList = (params) => {
    this.setState({
      loading: true
    })
    msgRead({
      type: getInfo('newsType'),
      token: getTOKEN(),
      ...params
    })
      .then(
        res => {
          this.setState({
            loading: false
          })
          if (res.error_code === 0) {
            this.setState({
              newsList: [...this.state.TaskList, ...res.data.data]
            })
          }
        }
      )
      .catch(
        err => {
          console.log(err)
        }
      )
  }
  navigate = (id) => {
    setInfo('noticeId', id)
    locationTo(locations.NoticeContent)
  }
  // 是否取消
  IsCancel = (e, no) => {
    e.stopPropagation()

    this.showMsgDialog("你确定要删除这条消息吗")
    this.setState({
      no: no,
    })
  }
  // 取消
  cancel = (no) => {
    console.log(this.state.canselId)
    msgDel({
      token: getTOKEN(),
      no: no
    })
      .then(
        res => {
          console.log(res)
          if (res.error_code === 0) {
            this.refs.summit.setState({
              content: '成功成功',
              visibility: true
            });
          }
        }
      )
      .catch(
        err => {
          console.log(err)
        }
      )
  }
  render() {
    const { newsList, imgurl } = this.state
    return (
      <div className={styles.homes}
        style={{
          boxSizing: 'border-box',
          paddingTop: '10px',
        }}
      >
        {newsList.length === 0 && <NONEWS />}
        {newsList.length > 0 &&
          <div className={styles["wrapper"]}>
            <ul>
              {newsList.map((item, index) => (
                <Navlistone
                  key={index}
                  title={item.title}
                  id={item.id}
                  imgurl={imgurl}
                  createTime={item.create_time}
                  message={item.message}
                  no={item.no}
                  is_read={item.is_read}
                  IsCancel={this.IsCancel}
                  navigate={this.navigate}
                />
              ))}
            </ul>
          </div>}
        <HintDialog
          ref="dialog"
          style={{
            color: "#fff"
          }}
          visibility={this.state.alertMsg !== ""}
          content={this.state.alertMsg}
          operateText="确定"
          operateClick={this.cancel}
        />
        <HintDialog
          ref="summit"
          style={{
            color: "#fff"
          }}
          visibility={this.state.alertMsg !== ""}
          content={this.state.alertMsg}
          operateText="确定"
          operateClick={() => { back() }}
        />
        <ProgressView visibility={this.state.loading} mode={ProgressView.MODE_MEDIUM} />
      </div>
    )
  }
}
const Navlistone = ({ title, message, no, imgurl, createTime, IsCancel, id, navigate,is_read }) => {
  return (
    <li style={style.navListOne}>
      <div style={style.nav_list_one_icon_wrapper}>
        <img style={style.nav_list_one_icon} src={NewsImg.RWTX} />
      </div>
      {getInfo('newsType') !== 1 &&
        <div style={style.nav_list_one_l}>
          <div style={style.nav_list_one_name}>
            <div> {message}
              <span style={style.nav_list_one_time}>
                {createTime}
              </span>
            </div>
            <div style={style.nav_list_one_circle} onClick={(e) => { IsCancel(e, no) }}>
              删除
          </div>
          </div>
          {getInfo('newsType') !== 1 &&
            <div style={style.nav_list_one_des}>
              暂无消息通知
          </div>}
        </div>}
      {getInfo('newsType') === 1 &&
        <div style={style.nav_list_one_l} onClick={() => { navigate(id) }}>
          <div style={{...style.nav_list_one_name,
            marginBottom:0,            
            width:'100%',
            overflow:'hidden',
            textOverflow:'ellipsis',
            whiteSpace:'nowrap',
            color:is_read?'#888':'#000'

            }}>
             {title}
          </div>
          <div>
            <span style={{...style.nav_list_one_time,marginLeft:0}}>
              {getLocalTime(createTime, 20)}
            </span>
          </div>
        </div>}
    </li>
  );
}

const style = {
  navListOne: {
    height: '75px',
    background: '#ffffff',
    padding: '0 3%',
    display: 'flex',
    alignItems: 'center',
    borderBottom: '0.5px solid #dddddd',
  },
  nav_list_one_icon_wrapper: {
    width: '12%',
  },
  nav_list_one_icon: {
    display: 'block',
    height: '40px',
    width: 'auto',
    marginRight: '10px',
    borderRadius: '20px',
  },
  nav_list_one_name: {
    display: 'flex',
    justifyContent: 'space-between',
    fontSize: '16px',
    marginBottom: '8px',
  },
  nav_list_one_des: {
    fontSize: '12px',
    color: '#333',
  },
  nav_list_one_time: {
    marginLeft: '10px',
    fontSize: '12px',
    color: '#d6d6d6',
  },
  nav_list_one_l: {
    width: '88%',
    background: '#ffffff',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
  },
  nav_list_one_circle: {
    height: '18px',
    lineHeight: '18px',
    padding: '0 6px',
    fontSize: '14px',
    color: "#9ea2ac"
  },
}

const mapStateToProps = state => {
  return {
    ...state[NameSpace]
  };
};

const mapDispatchToProps = dispatch => {
  return {
    selectItem(item) {
      let params = {
        problemId: item.id,
      };
      dispatch(Actions.actionSelectProblem(params));
    },
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(NewsTask);